<template>
    <div class="box_alarm">
        <MoodalTitle :title="'市政问题高发路段分析'">
            <TimeTab :timeList="timeList" @timeReturnFn="timeReturnFn" />
        </MoodalTitle>
        <!-- 统计图 -->
        <div id="chart" class="box_chart">
        </div>
    </div>
</template>
<script>
import TimeTab from '@/components/TimeTab/Index.vue'
import MoodalTitle from '@/components/ModalTitle/Index.vue'
import { ZhiShiJianGuan } from '@/api/zhangzi/index'
export default {
    components: { MoodalTitle, TimeTab },
    data() {
        return {
            timeList: [
                {
                    title: '周',
                    value: 1,
                },
                {
                    title: '月',
                    value: 2,
                },
                {
                    title: '年',
                    value: 3,
                },
            ],
            street: [], //街道
            orderNumber: [], //数量
            dateType: 0
        }
    },
    mounted() {
        this.IncidenceList()
    },
    methods: {
        timeReturnFn(val) {
            this.dateType = val.value
            this.street = [] //街道
            this.orderNumber = []  //数量
            this.IncidenceList()
        },
        functionEchart() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(document.querySelector('#chart'));

            let option = {
                title: {
                    // text: '数量',
                    // color: '#ffffff',
                },
                xAxis: {
                    axisLabel: {
                        color: '#fff', // 坐标轴label文字颜色
                    },
                    nameTextStyle: {
                        color: '#64A7DF'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#64A7DF'
                        }
                    },
                    data: this.street
                },
                yAxis: {
                    name: '数量',
                    axisLabel: {
                        color: '#fff', // 坐标轴label文字颜色
                    },
                    nameTextStyle: {
                        color: '#64A7DF'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#64A7DF'
                        }
                    },

                    splitLine: { // ‘三’形分隔线
                        show: true,
                        lineStyle: {
                            color: '#22376d'
                        },
                    }

                },

                series: [{
                    type: 'bar',
                    data: this.orderNumber,
                    itemStyle: {
                        color: {
                            type: 'linear',
                            y: 1, // 若将此值设为1，表示从上到下渐变
                            colorStops: [
                                {
                                    offset: 0,
                                    color: '#00A2E2' // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: '#00D6DE' // 90% 处的颜色
                                }
                            ]
                        }
                    },
                    barWidth: 32,
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        },
        // 市政问题高发路段分析
        IncidenceList() {
            let parge = {
                dateType: this.dateType
            }
            ZhiShiJianGuan.getHighRoad(parge).then(res => {
                console.log(res, '市政问题高发路段分析');
                if(res.code == 200){
                    res.data.forEach(item =>{
                        this.street.push(item.street)
                        this.orderNumber.push(item.orderNumber)
                    })
                    this.functionEchart()
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.box_alarm {
    width: 50rem;
    height: 47.5rem !important;
    margin-bottom: 1.9rem;
}

.box_chart {
    width: 45rem;
    height: 40rem;
}
</style>